<template>
	<view class="lease_house">
		<!-- 商品标题 -->
		<view class="le_hou_tit">
			<text class="hou_title">标题</text>
			<input class="hou_input" v-model="title" type="text" placeholder="请输入商品标题">
		</view>
		<!-- 出租信息 -->
		<view class="lease_info">
			<text class="hou_title">出租信息</text>
			
			<view class="hou_in_item" >
				<text>出租类型</text>				
				<view class="item_choice">
					<picker @change="bindPickerChange" :value="typeindex" :range="optiondata.type.values">
						<!-- {{optiondata[6].values[index]}} -->
						<text style="margin-right: 20rpx;"  v-if="typeindex!=-1">{{optiondata.type.values[typeindex]}}</text>
						<text style="margin-right: 20rpx;" v-if="typeindex==-1">选择</text>
						<image class="item_choice_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
					</picker>
				</view>
			</view>
			<view class="hou_in_item">
				<text>价格</text>
				<view class="item_choice"> 
					<input type="number" v-model="money"  placeholder="输入价格"/>
					<text>元/月</text>
				</view>
			</view>
			<view class="hou_in_item" >
				<text>付款方式</text>
				<view class="item_choice">
					<picker @change="bindPickerChange2" :value="pay_methodindex2" :range="optiondata.pay_method.values">
						<!-- {{optiondata[7].values[index2]}} -->
						<text style="margin-right: 20rpx;"  v-if="pay_methodindex2!=-1">{{optiondata.pay_method.values[pay_methodindex2]}}</text>
						<text style="margin-right: 20rpx;" v-if="pay_methodindex2==-1">选择</text>
						<image class="item_choice_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
					</picker>
				</view>
			</view>
		</view>
		<view class="lease_img">
			<text class="hou_title">房屋主图</text>
			<view class="upload_img">
				<u-upload :custom-btn="true" 
				:header="headers"
				ref="uUpload2"
				width="151" height="151" :action="action" :file-list="fileList2" :max-size="5 * 1024 * 1024" max-count="1">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"
					style="height: 161rpx; 
					color: #909399; 
					text-align: center; 
					width: 151rpx; 
					padding-top: 30rpx; 
					display: flex;
					flex-direction: column;
					align-items: center;
					border: 1rpx dashed #909399;"
					>
						<u-icon name="camera" size="60" style="display: block;" color="#909399"></u-icon> 
						<text>图片管理</text>
					</view>
				</u-upload> 
			</view>
		</view>
		<!-- 房屋图片 -->
		<view class="lease_img">
			<text class="hou_title">房屋图片</text>
			<view class="upload_img">
				<u-upload :custom-btn="true" 
				:header="headers"
				ref="uUpload"
				width="151" height="151" :action="action" :file-list="fileList" :max-size="5 * 1024 * 1024" max-count="5">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"
					style="height: 161rpx; 
					color: #909399; 
					text-align: center; 
					width: 151rpx; 
					padding-top: 30rpx; 
					display: flex;
					flex-direction: column;
					align-items: center;
					border: 1rpx dashed #909399;"
					>
						<u-icon name="camera" size="60" style="display: block;" color="#909399"></u-icon> 
						<text>图片管理</text>
					</view>
				</u-upload> 
			</view>
		</view>
		<!-- 房屋详情 -->
		<view class="lease_details">
			<text class="hou_title">房屋详情</text>
			<view class="deta_tag" v-if="!labeldata">
				<text class="tag_item" :class="{tag_item_special:item.ischeck}"  @click="choselabel(item)" v-for="(item,index) in getlabelData[0].valueobj">{{item.name}}</text>
			</view>
			<view class="deta_tag" v-if="labeldata">
				<text v-for="(item,index) in getlabelData">
					<text class="tag_item" 
					:class="{tag_item_special:v.ischeck}" 
					@click="choselabel(v)"
					v-for="(v,n) in item.valueobj"  v-if="v.ischeck">{{v.name}}</text>
				</text>
			</view>
			<view class="data_more" @click="goToLeaseDetails">
				<text>更多</text>
				<image class="more_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow.png'" mode=""></image>
			</view>
		</view>
		<!-- 基本介绍 -->
		<view class="lease_introduce">
			<text class="hou_title">基本介绍</text>
			<textarea maxlength="100" v-model="describe" class="intr_text" placeholder="请输入基本情况" />
			<view class="intr_num">
				<text>{{describeLength}}</text>/
				<text>100</text>
			</view>
		</view>
		<!-- 下一步 -->
		<view class="lease_details_foo" @click="goToLeaseStep">
			<view class="foo_btn">下一步</view>
		</view>
		
		<!-- 选择框 -->
		<!-- <u-select v-model="changeInfoSelect" :list="list"></u-select> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				houseOptionList: [],
				// 是否展示选择框
				changeInfoSelect: false,
				 array: ['整租', '合租'],
				 typeindex: -1,  //出租类型
				 pay_methodindex2: -1,
				 labeldata:'',
				 getlabelData:'',
				 money:'',
				 describe:'',
				 describeLength:0,
				 action: 'https://community.chuangxiangdianli.com/api/Mini/circle/uploadImg',
				 headers: {
				 	"Authorization": ''
				 },
				 fileList:[],//轮播
				 fileList2:[],//主图
				 // 图片列表
				 images: [],
				 title:'',
				 optiondata:'',  //各种选项
				 detailsHouse:{}
			};	
		},
		watch: {
			describe(newValue, oldValue){
				this.describeLength=newValue.length
			}
		},
		onBackPress() {
			if(this.id){
				 uni.removeStorageSync('labelData');
			}
		},
		onLoad(option) {
			this.id=option.id
			if(uni.getStorageSync('userInfo')){
				this.roomInfo = uni.getStorageSync('userInfo').roomInfo
				this.nickName = uni.getStorageSync('userInfo').nickName
				this.headers.Authorization = 'Bearer' + ' ' + uni.getStorageSync('userInfo').token
			}

			// this.getHouseOption()
			
		},
		onShow() {
			this.labeldata = uni.getStorageSync('labelData');
			this.getlabel()
			this.getcheckdata()
			//修改
			if(this.id){
				this.getLeasedetails(this.id)
			}
			
		},
		methods:{
			choselabel(v){
				console.log(v)
				v.ischeck=!v.ischeck
				console.log(this.getlabelData[0].valueobj)
			},
			// 获取房屋详情
			getLeasedetails(id){
				this.$http.get('Mini/circle/house/lease/' + id).then(res => { 
					if(res.code == 200){
						if(res.data.images.length>0){
							if(res.data.images.indexOf(','!=-1)){
								res.data.imagesArry=res.data.images.split(',');
							}else{
								res.data.imagesArry=[]
								res.data.imagesArry.push(res.data.images)
							}
							
						}
						this.detailsHouse = res.data
						for(var i=0;i<this.detailsHouse.imagesArry.length;i++){
							this.fileList.push({
								url:this.detailsHouse.imagesArry[i]
							})
						}
						this.fileList2.push({
							url:this.detailsHouse.image
						})
						this.title=this.detailsHouse.title
						this.money=this.detailsHouse.money
						//付款方式
						for(var i=0;i<this.optiondata.pay_method.values.length;i++){
							if(this.detailsHouse.pay_method==this.optiondata.pay_method.values[i]){
								this.pay_methodindex2=i
							}
						}
						// 房屋类型
						this.typeindex=this.detailsHouse.type-1
						//房屋详情
						var countnum=0
						if(this.labeldata){
							for(var i=0;i<this.getlabelData.length;i++){
								for(var p=0;p<this.getlabelData[i].valueobj.length;p++){
									this.getlabelData[i].valueobj[p].ischeck=this.labelData[i].valueobj[p].ischeck
								}
							}
						}else{
							for(var k in this.detailsHouse.more_option){
								for(var i=0;i<this.getlabelData.length;i++){
									if(k==this.getlabelData[i].name){
										for(var j=0;j<this.getlabelData[i].valueobj.length;j++){
											if(Object.prototype.toString.call(this.detailsHouse.more_option[k])=="[object Array]"){
												for(var l=0;l<this.detailsHouse.more_option[k].length;l++){
														if(this.getlabelData[i].valueobj[j].name==this.detailsHouse.more_option[k][l]){
															this.getlabelData[i].valueobj[j].ischeck=true
															countnum++
														}
												}
											}else if(Object.prototype.toString.call(this.detailsHouse.more_option[k])=="[object Object]"){
												for(var z in this.detailsHouse.more_option[k]){
													if(this.getlabelData[i].valueobj[j].name==z){
														this.getlabelData[i].valueobj[j].ischeck=true
														countnum++
													}
												}
											}else if(Object.prototype.toString.call(this.detailsHouse.more_option[k])=="[object String]"){
												if(this.getlabelData[i].valueobj[j].name==this.detailsHouse.more_option[k]){
													this.getlabelData[i].valueobj[j].ischeck=true
													countnum++
													}
											}
										}
									}
								}
							}
							if(countnum>0){
								this.labeldata=true
							}
						}

						//描述
						this.describe=this.detailsHouse.describe
						
					}
				})
			},
			// 房屋详情
			goToLeaseDetails(){
				var that=this
				uni.setStorage({
				    key: 'labelData',
				    data: that.getlabelData,
				    success: function () {
				       uni.navigateTo({
				       	url: '/neighbor/leasedetails/index'
				       })
				    }
				});
				
			},
			// 出租选项
			goToLeaseStep(){
				var that=this
				//校验
				if(this.title.length==0){
					uni.showToast({
						title:'标题不能为空',
						icon:'none'
					})
					return
				}
				if(this.index==-1){
					uni.showToast({
						title:'请选择出租类型',
						icon:'none'
					})
					return
				}
				if(!this.money){
					uni.showToast({
						title:'请输入价格',
						icon:'none'
					})
					return
				}
				if(this.index2==-1){
					uni.showToast({
						title:'请选择付款方式',
						icon:'none'
					})
					return
				}
				var k=0
				console.log(this.getlabelData)
				for(var i=0;i<(this.getlabelData.length);i++){
					for(var j=0;j<this.getlabelData[i].valueobj.length;j++){
						if(this.getlabelData[i].valueobj[j].ischeck){
							
							k++
						}
					}
				}
				// console.log(k)
				// console.log(this.$refs.uUpload2.lists[0].file.path)
				console.log(this.$refs.uUpload2.lists[0])
				if(!this.$refs.uUpload2.lists[0]){
					uni.showToast({
						title:'请提交房屋主图',
						icon:'none'
					})
					return
				}
				if(this.$refs.uUpload.lists.length==0){
					uni.showToast({
						title:'请提交房屋图片',
						icon:'none'
					})
					return
				}
				if(k==0){
					uni.showToast({
						title:'请选择房屋详情',
						icon:'none'
					})
					return
				}
				
				if(this.describe.length==0){
					uni.showToast({
						title:'基本介绍不能为空',
						icon:'none'
					})
					return
				}
				var more_option={}
				// console.log(this.labeldata[3])
				for(var i=0;i<this.getlabelData.length;i++){
					if(this.getlabelData[i].type=='checkbox'){
						more_option[this.getlabelData[i].name]=[]
						for(var j=0;j<this.getlabelData[i].valueobj.length;j++){
							if(this.getlabelData[i].valueobj[j].ischeck){
								more_option[this.getlabelData[i].name].push(this.getlabelData[i].valueobj[j].name)
							}
						}
					}
					else{
						for(var j=0;j<this.getlabelData[i].valueobj.length;j++){
							if(this.getlabelData[i].valueobj[j].ischeck){
								more_option[this.getlabelData[i].name]=this.getlabelData[i].valueobj[j].name
							}
						}
						}
				}
				console.log(more_option)
				console.log(this.fileList)
				console.log(this.$refs.uUpload.lists)
				var images=''
				var image=''
				for(var i=0;i<this.$refs.uUpload.lists.length;i++){
					if(this.$refs.uUpload.lists[i].response){
						images=images+this.$baseImgUrl+this.$refs.uUpload.lists[i].response.data.path+','
					}else{
						images=images+this.$refs.uUpload.lists[i].url+','
					}
				}
				images=images.substring(0,(images.length-1))
				if(this.$refs.uUpload2.lists[0]){
					if(this.$refs.uUpload2.lists[0].response){
						image=this.$baseImgUrl+this.$refs.uUpload2.lists[0].response.data.path
					}else{
						image=this.$refs.uUpload2.lists[0].url
					}
				}
				console.log(image)
				console.log(images)
				// return
				uni.navigateTo({
					url: '/neighbor/leasehousebnstep/index?id='+this.id,
					success: function(res) {
					  // 通过eventChannel向被打开页面传送数据
					  res.eventChannel.emit('acceptDataFromOpenerPage', { data: {
						  more_option,
						  images,
						  image,
						  title:that.title,
						  money:that.money,
						  pay_method:that.optiondata.pay_method.values[that.pay_methodindex2],
						  describe:that.describe,
						  type:parseInt(that.typeindex)+1
					  } })
					}
				})
			},
			// // 获取房屋可选规格
			// getHouseOption(){
			// 	this.$http.get('Mini/circle/house/getHouseOption').then(res => {
			// 		// console.log(res)
			// 		this.optiondata=res.data
			// 	})
			// },
			 getcheckdata(){
				 this.$http.get('Mini/circle/house/getOption').then(res => {
				 	console.log(res)
				 	this.optiondata=res.data
				 })
			 },
			// 选择 出租类型、付款方式
			switchSelect(){
				this.changeInfoSelect = true
			},
			
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.target.value)
			            this.typeindex = e.target.value
			},
			bindPickerChange2: function(e) {
			           console.log('picker发送选择改变，携带值为', e.target.value)
			           this.pay_methodindex2 = e.target.value
			},
			getlabel(){
			this.$http.get('Mini/circle/house/getHouseOption').then(res => {
				// console.log(res.data)
				if(!this.labeldata){
					for(var i=0;i<(res.data.length);i++){
						res.data[i].valueobj=[]
						for(var j=0;j<res.data[i].values.length;j++){
							res.data[i].valueobj.push({
								name:res.data[i].values[j],
								ischeck:false
							})
						}
					}
				}else{
					for(var i=0;i<(res.data.length);i++){
						res.data[i].valueobj=[]
						for(var j=0;j<res.data[i].values.length;j++){
							res.data[i].valueobj=this.labeldata[i].valueobj
						}
					}
				}
	
			this.getlabelData=res.data
		})
	},
	// 过滤图片路径
	filterImgs(arr){
		let newImgs = []
		arr.map((val,i) => {
			newImgs.push(this.$baseImgUrl + val.response.data.path) 
		})
		this.images = Array.from(new Set(newImgs)) 
	}
	
		}
	}
</script>

<style lang="scss">
	.lease_house {
		height: 100vh;
		background-color: #f7f8f9;

		.hou_title {
			display: block;
			font-size: 32rpx;
			font-weight: 700;
			height: 115rpx;
			line-height: 115rpx;
		}

		.le_hou_tit {
			padding: 0 30rpx;
			height: 196rpx;
			background-color: #fff;

			.hou_input {
				font-size: 30rpx;
				color: #8A8A8A;
			}
		}
		.lease_info{
			margin-top: 13rpx;
			padding: 0 30rpx;
			height: 374rpx;
			background-color: #fff;
			.hou_in_item{
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #666;
				.item_choice{ 
					position: relative;
					display: flex; 
					.item_choice_img{
						margin: auto 0;
						width: 22rpx;
						height: 28rpx;
					}
					input {
						position: absolute;
						top: 50%;
						right: 80rpx;
						transform: translateY(-50%);
						width: 200rpx;
						text-align: right;
						
					}
				}
			}
		}
		.lease_img{
			padding: 0 30rpx;
			margin-top: 16rpx;
			min-height: 322rpx;
			background-color: #fff; 
		}
		.lease_details{ 
			margin-top: 16rpx;
			padding: 0 30rpx;
			// height: 408rpx;
			background-color: #fff;
			.deta_tag{
				.tag_item{ 
					margin: 0 16rpx 36rpx 0;
					display: inline-block;
					padding: 0 30rpx;
					height: 59rpx;
					font-size: 30rpx;
					color: #8A8A8A;
					line-height: 59rpx;
					text-align: center;
					border: 1rpx solid #A5A5A5;
					border-radius: 5rpx; 
				}
				.tag_item_special{
					margin: 0 16rpx 36rpx 0;
					display: inline-block;
					padding: 0 30rpx;
					height: 59rpx;
					font-size: 30rpx;
					color: #FF651A;
					background: #FFE7DB;
					line-height: 59rpx;
					text-align: center;
					border: 1rpx solid #FF7430;
					border-radius: 5rpx; 
				}
			}
			.data_more{  
				width: 139rpx;
				height: 59rpx;
				line-height: 59rpx;
				text-align: center;
				font-size: 30rpx;
				color: #fff;
				background: #FF7430;
				border-radius: 5rpx;
				.more_img{
					position: relative;
					top: -4rpx;
					left: 2rpx;
					width: 26rpx;
					height: 26rpx; 
				}  
			}
		}
		.lease_introduce{
			position: relative;
			margin-top: 16rpx;
			padding: 0 30rpx;
			height: 284rpx;
			background-color: #fff;
			.intr_text{
				height: 130rpx;
				font-size: 30rpx;
			}
			.intr_num{
				position: absolute; 
				right: 30rpx;
				bottom: 20rpx;
			}
		}
		.lease_details_foo{
			position: relative;
			height: 160rpx;
			background-color: #f7f8f9;
			.foo_btn{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 670rpx;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				background: #FF7430;
				border-radius: 48rpx; 
			}
		}
	}
</style>
